<template>
  <component
    v-if="id && visible"
    :is="tabName"
    :crm-type="crmType"
    :id="id"
    :listener-ids="listenerIDs"
    :no-listener-ids="noListenerIDs"
    :no-listener-class="noListenerClass"
    :isAgreement="isAgreement"
    class="d-view"
    @handle="detailHandle"
    @hide-view="hiddenView"
    @sign="sign"
  />
</template>

<script type="text/javascript">
// import { getMaxIndex } from '@/utils/index'
import LeadsDetail from "../leads/Detail";
import CustomerDetail from "../customer/Detail";
import ContactsDetail from "../contacts/Detail";
import BusinessDetail from "../business/Detail";
import ContractDetail from "../contract/Detail";
import ProductDetail from "../product/Detail";
import ReceivablesDetail from "../receivables/Detail";
import RefundDetail from "../refund/Detail";
import VisitDetail from "../visit/Detail";
import InvoiceDetail from "../invoice/Detail";
import CustomerVipDetail from "../vipStudents/Detail";
import RoiDetail from "@/views/crm/roiMoney/Detail";
import AllianceBusinessDetail from "@/views/crm/allianceBusiness/Detail";
import CrmPutinAllianceBusiness from "@/views/crm/crmPutinAllianceBusiness/Detail";
import OverdueDetail from "../overdue/Detail";
export default {
  name: "CRMAllDetail", // 详情
  components: {
    LeadsDetail,
    CustomerDetail,
    ContactsDetail,
    BusinessDetail,
    ContractDetail,
    ProductDetail,
    ReceivablesDetail,
    RefundDetail,
    VisitDetail,
    InvoiceDetail,
    CustomerVipDetail,
    RoiDetail,
    AllianceBusinessDetail,
    CrmPutinAllianceBusiness,
    OverdueDetail
  },
  props: {
    /** 模块ID */
    id: [String, Number],
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: ""
    },
    visible: {
      type: Boolean,
      default: false
    },
    // 监听的dom 进行隐藏详情
    listenerIDs: {
      type: Array,
      default: () => {
        return ["crm-main-container"];
      }
    },
    // 不监听
    noListenerIDs: {
      type: Array,
      default: () => {
        return [];
      }
    },
    noListenerClass: {
      type: Array,
      default: () => {
        return ["el-table__body"];
      }
    },
    isAgreement: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      tabName: "" // 组件名
    };
  },
  computed: {},
  mounted() {
    console.log(this.crmType, "是啥是啥");
  },
  watch: {
    crmType: function(type) {
      if (this.crmType == "leads") {
        this.tabName = "LeadsDetail";
      } else if (this.crmType == "customer") {
        this.tabName = "CustomerDetail";
      } else if (this.crmType == "contacts") {
        this.tabName = "ContactsDetail";
      } else if (this.crmType == "business") {
        this.tabName = "BusinessDetail";
      } else if (this.crmType == "contract") {
        this.tabName = "ContractDetail";
      } else if (this.crmType == "product") {
        this.tabName = "ProductDetail";
      } else if (this.crmType == "receivables") {
        this.tabName = "ReceivablesDetail";
      } else if (this.crmType == "refund") {
        this.tabName = "RefundDetail";
      } else if (this.crmType == "visit") {
        this.tabName = "VisitDetail";
      } else if (this.crmType == "invoice") {
        this.tabName = "InvoiceDetail";
      } else if (this.crmType == "vipStudents") {
        this.tabName = "CustomerVipDetail";
      } else if (this.crmType == "roiMoney") {
        this.tabName = "RoiDetail";
      } else if (this.crmType == "allianceBusiness") {
        this.tabName = "AllianceBusinessDetail";
      } else if (this.crmType == "crmPutinAllianceBusiness") {
        this.tabName = "CrmPutinAllianceBusiness";
      } else if (this.crmType == "overdue") {
        this.tabName = "OverdueDetail";
      } else {
        this.tabName = "";
      }
    }
  },
  mounted() {
    // if (this.visible) {
    //   this.$nextTick(() => {
    //     console.log(this.$el, 'this.$el----')
    //     document.body.appendChild(this.$el)
    //     this.$el.style.zIndex = getMaxIndex()
    //   })
    // }
  },
  destroyed() {
    // remove DOM node after destroy
    // if (this.$el && this.$el.parentNode) {
    //   this.$el.parentNode.removeChild(this.$el)
    // }
  },
  methods: {
    hiddenView() {
      this.$emit("update:visible", false);
    },

    sign(data) {
      this.$emit("sign", data);
    },

    /**
     * 详情操作
     */
    detailHandle(data) {
      if (data && data.type) {
        if (
          data.type === "alloc" ||
          data.type === "get" ||
          data.type === "transfer" ||
          data.type === "transform" ||
          data.type === "delete" ||
          data.type === "put_seas"
        ) {
          this.hiddenView();
        }
      }

      this.$emit("handle", data);
    }
  }
};
</script>
<style lang="scss" scoped>
.full-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.d-view {
  position: fixed;
  width: 926px;
  top: 60px;
  bottom: 0px;
  right: 0px;
  background-color: #fff;
}
</style>
